<template>
  <div class="chat-container" :style="{backgroundColor: wrapBg}">
    <div class="window" id="window-view-container" >
      <div class="loading" v-if="dataArray && dataArray.length===0">
        <div style="margin-top: 300px;text-align:center; font-size: 16px;">
          <span>未查找到聊天记录</span>
        </div>
      </div>
      <div class="loading" v-if="dataArray.length===0">
        <div style="margin-top: 300px;">
          <div>加载中...</div>
        </div>
      </div>
      <slot name="header"></slot>
      <div class="message" >
        <ul>
          <li  v-for="(message, index) in dataArray" :key="message.id"
              :class="message.direction===2?'an-move-right':'an-move-left'">
            <p class="time"><span v-text="message.ctime"></span></p>
            <p class="time system" v-if="message.type===10000"><span v-html="message.content"></span></p>
            <div :class="'main' + (message.direction===2?' self':'')" v-else>
              <img class="avatar" width="45" height="45" :src="message.direction===2? meAvatar: youAvatar">
              <div class="text" v-text="message.content"></div>
            </div>
          </li>
        </ul>
        <div class="dialogue-footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from "better-scroll";
export default {
  name: "Chat",
  props: {
    contactNickname: {
      type: String,
      default: 'Mystic Faces'
    },
    data: {
      type: Array,
      required: true
    },
    wrapBg: {
      type: String,
      default: '#efefef'
    },
    contactAvatarUrl: {
      type: String,
    },
    ownerAvatarUrl: {
      type: String,
    }
  },
  data() {
    return {
      minHeight: 700,
      dataArray: [],
      meAvatar: '',
      meNickName: '',
      youNickName: '',
      youAvatar: ''
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      // this.dataArray = this.dataArray.concat(this.data);
      this.dataArray = this.$store.state.chatMsg
      this.meAvatar = this.$store.state.meAvatar
      this.youAvatar = this.$store.state.youAvatar
      this.meNickName = this.$store.state.meNickName
      this.youNickName = this.$store.state.youNickName
    },
    focusIpt() {
      this.timer = setInterval(function () {
        document.body.scrollTop = document.body.scrollHeight
      }, 100)
    },
    blurIpt() {
      clearInterval(this.timer)
    },
  }
}
</script>
<style scoped>
.dialogue-footer {
  width: 100%;
  position: fixed;
  bottom: 3.9rem;
  left: 0;
  height: 0.5rem;
}
.chat-container {
  width: 100%;
  height: 100%;
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
}


.window {
  box-shadow: 1px 1px 20px -5px #000; /*max-width: 450px;*/
  min-width: 300px;
  background: #F5F5F5;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  height: 100%;
  position: relative;
  z-index: 101;
}

button {
  border: 0;
  background: none;
  border-radius: 0;
  text-align: center;
}

button {
  outline: none;
}


.loading, .no-more {
  text-align: center;
  color: #b0b0b0;
  line-height: 100px;
}


.message {
  /*height: 100%;*/
  padding: 10px 15px;
  /*overflow-y: scroll;*/
  background-color: #F5F5F5;
}

.message li {
  margin-bottom: 15px;
  left: 0;
  position: relative;
  display: block;
}

.message .time {
  margin: 10px 0;
  text-align: center;
}

.message .text {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  max-width: calc(100% - 75px);
  min-height: 35px;
  line-height: 2.1;
  font-size: 15px;
  padding: 6px 10px;
  text-align: left;
  word-break: break-all;
  background-color: #fff;
  color: #000;
  border-radius: 4px;
  box-shadow: 0px 1px 7px -5px #000;
}

.message .avatar {
  float: left;
  margin: 0 10px 0 0;
  border-radius: 3px;
  background: #fff;
}

.message .time > span {
  display: inline-block;
  padding: 0 5px;
  font-size: 12px;
  color: #fff;
  border-radius: 2px;
  background-color: #DADADA;
}

.message .system > span {
  padding: 4px 9px;
  text-align: left;
}

.message .text:before {
  content: " ";
  position: absolute;
  top: 9px;
  right: 100%;
  border: 6px solid transparent;
  border-right-color: #fff;
}

.message .self {
  text-align: right;
}

.message .self .avatar {
  float: right;
  margin: 0 0 0 10px;
}

.message .self .text {
  background-color: #9EEA6A;
}

.message .self .text:before {
  right: inherit;
  left: 100%;
  border-right-color: transparent;
  border-left-color: #9EEA6A;
}

.message .image {
  max-width: 200px;
}

img.static-emotion-gif, img.static-emotion {
  vertical-align: middle !important;
}


@keyframes moveRight {
  0% {
    left: -20px;
    opacity: 0
  }
  100% {
    left: 0;
    opacity: 1
  }
}

@-webkit-keyframes moveRight {
  0% {
    left: -20px;
    opacity: 0
  }
  100% {
    left: 0px;
    opacity: 1
  }
}

@keyframes moveLeft {
  0% {
    left: 20px;
    opacity: 0
  }
  100% {
    left: 0px;
    opacity: 1
  }
}

@-webkit-keyframes moveLeft {
  0% {
    left: 20px;
    opacity: 0
  }
  100% {
    left: 0px;
    opacity: 1
  }
}

@media (max-width: 367px) {
  .fzDInfo {
    width: 82%;
  }
}
</style>